<template>
        <!-- 邮箱验证登录 -->
    <el-form :model="formEmail" mstatus-icon :rules="rules2" ref="formEmail" label-width="100px" v-show="patternEmail"> <!-- ref:表单验证(和提交数据相同) -->
        <el-form-item label="邮箱" prop="email">  <!-- prop的值与rules里面要验证的字段值是对应 -->
            <el-input
                    prefix-icon="el-icon-paperclip" style="width: 250px"
                    type="text" v-model="formEmail.email" autocomplete="off">  <!-- autocomplete:自动补全 -->
            </el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="verCode">
            <el-input
                    prefix-icon="el-icon-menu"
                    style="width: 250px !important;" type="text"
                    v-model="formEmail.verCode" autocomplete="off">
                <el-button slot="append" type="primary" @click="gainVerCode()" :disabled="showTime"><span v-show="showTime">{{downTime}}秒后</span>获取验证码</el-button>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button id="loginBut" type="primary" @click="loginEmail()" style="margin-right: 100px">登录</el-button>
            <span class="pull-right"><small>还没有账号？</small><a href="../register/index.html">注册</a></span>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: 'EmailName',
        data(){
        return{
            patternEmail: false,
            //倒计时
            showTime: false,
            downTime: 0,
            //邮箱登录信息
            formEmail: {
                email: '',
                verCode: '',
            },
            rules2:{
                email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: '请输入正确的邮箱', trigger: 'blur' },
                ],  //blur失去焦点
                verCode: [
                    {required: true,  message: '验证码不能为空', trigger: 'blur'}
                ],
            },
        }
    },
    methods: {
        //邮箱验证码登录
        loginEmail(){
            this.$refs.formEmail.validate((valid) => {
                if (valid) {
                    this.axios({
                        method: "POST",
                        url: "/user/loginEmail/"+this.formEmail.verCode+"/"+this.formEmail.email,
                    }).then((res)=>{
                        if(res.data!=false){
                            this.$message.success({
                                message: '登陆成功，即将跳转',
                                type: 'success'
                            });
                            setTimeout(function () {
                                location.href="../chat/index.html";
                            },500)
                        }else{
                            this.$message.error('验证码不正确');
                        }
                    });
                } else {
                    this.$message.error('此提交不符合规则');
                    return false;
                }
            });
        },
        //实现倒计时
        Time() {
            this.downTime=30;
            var time=setInterval(() => {
                this.downTime -= 1;
                if(this.downTime==0){
                    this.showTime=false;
                    clearInterval(time);
                }
            }, 1000)
        },
        //获取验证码
        gainVerCode(){
            this.Time();
            this.axios({
                method: "GET",
                url: "/user/gainVerCode/"+this.formEmail.email,
            }).then((res)=>{
                if(res.data){
                    this.$message.success({
                        message: '已发送到此邮箱，请注意接收',
                        type: 'success'
                    });
                }else{
                    this.$message.error('邮箱不存在');
                }
            });
            this.showTime=true;
        },
    },
    //实例被挂载后调用
    mounted(){
        //绑定对应的自定义事件
        this.$bus.$on('email',(data)=>{
            this.patternEmail=data;
        })
    },
    //实例销毁之前调用
    beforeDestroy(){
        //解绑某事件
        this.$bus.$off('email')
    }
}
</script>

<style>

</style>